<template>
    <div class="rating-select">
        <div class="select border-1px">
            <div class="all" @click="chooseType(0)" :class="{'active': selectType===0}">{{desc.all + ' ' + ratingObj.allCount}}</div>
            <div class="commend" @click="chooseType(1)" :class="{'active': selectType===1}">{{desc.commend + ' ' + ratingObj.commendCount}}</div>
            <div class="complain" @click="chooseType(2)" :class="{'active': selectType===2}">{{desc.complain + ' ' + ratingObj.complainCount}}</div>
        </div>
        <div class="only-content" @click="isCheck">
            <i class="icon-check_circle" :class="{'selected': hasCheck}"></i><span class="label">只看有内容的评价</span>
        </div>
    </div>
</template>

<script>
const ALL = 0
export default {
    props: {
        ratingObj: {
            type: Object,
            default() {
                return {
                    allCount: 0,
                    commendCount: 0,
                    complainCount: 0
                }
            }
        },
        desc: {
            type: Object,
            default() {
                return {
                    all: '全部',
                    commend: '满意',
                    complain: '不满意'
                }
            }
        }
    },
    data () {
        return {
            selectType: ALL,
            hasCheck: false
        }
    },
    methods: {
        chooseType(type) {
            this.selectType = type
            this.$emit('select', {
                type: this.selectType,
                checked: this.hasCheck
            })
        },
        isCheck() {
            this.hasCheck = !this.hasCheck
            this.$emit('select', {
                type: this.selectType,
                checked: this.hasCheck
            })
        }
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import '../../common/stylus/base.styl'

.rating-select
    padding: 18px 18px 12px 18px
    border-bottom: 1px solid rgb(230,231,232)
    .select
        display: flex
        border-bottom: 1px solid rgba(7, 17, 27, 0.1)
        color: rgb(77, 85, 93)
        padding-bottom: 18px
        .all, .commend, .complain
            height: 32px
            text-align: center
            line-height: 32px
            margin-right: 8px
            border-radius: 2px
            padding: 0 8px
            &.active
                color: white
        .all, .commend
            background: rgba(0, 160, 220, 0.2)
            &.active
                background: rgb(0, 160, 220)
        .complain
            margin: 0 
            background: rgba(77, 85, 93, 0.2)
            &.active
                background: rgb(77, 85, 93)
    .only-content
        padding-top: 12px
        color: rgb(147, 153, 159)
        display: flex
        align-items: center
        .icon-check_circle
            margin-right: 4px
            font-size: 24px
            line-height: 24px
            &.selected
                color: rgb(51,195,99)
        .label
            font-size: 12px
            line-height: 24px
</style>
